<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        form{
            width: 500px;
            padding: 20px;
            margin: 50px auto;
            border: 3px solid pink;
            display: flex;
            flex-direction: column;
            font-size: 30px;
            padding-top: 50px;
            position: relative;
        }

        form>span{
            position: absolute;
            left: 50%;
            top: 5px;
            transform: translateX(-50%);
            width: 100%;
            text-align: center;
            color: red;

            display: none;
        }

        form>label{
            height: 50px;
        }

        form>label>input{
            font-size: 24px;
            height: 40px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <form>
        <span class="error">用户名或密码错误</span>
        <label>
            用户名：<input class="username" type="text">
        </label>
        <label>
            密  码：<input class="password" type="text">
        </label>
        <button>登录</button>
    </form>

    <script>
        /* 案例-登录
            分析需求：
              +问题1：什么时候进行发送请求?
                => 点击登录按钮的时候
                => 需要给 form 标签绑定一个表单提交事件

              +问题2：需要拿到哪些信息?
                => 需要拿到用户填写的用户名和密码

              +问题3：需要如何发送给后端?
                => 按照接口文档的规范进行发送

              +问题4：请求完成以后，我们需要做什么？
                => 根据后端返回的信息，进行一些后续的操作
                => 如果后端返回的信息是登录成功，那么我们进行页面跳转
                => 如果后端返回的是登录失败，那么我们提示用户错误
         */

        //  0.获取元素
        // 0-1.form 标签
        var loginForm = document.querySelector('form')
        // 0-2.用户名文本框
        var nameInp = document.querySelector('.username')
        // 0-3.密码文本框
        var pwdInp = document.querySelector('.password')
        // 0-4.错误提示文本
        var errBox = document.querySelector('.error')

        // 1.给form标签绑定一个表单提交事件
        loginForm.onsubmit = function(e){
            // 注意：阻止表单的默认提交行为
            e.preventDefault()

            // 2.拿到填写的用户名和密码
            var name = nameInp.value
            var pwd = pwdInp.value

            // 2-2.验证用户名和密码
            if(!name || !pwd) return alert('请完整填写表单')

            // 3.发送 ajax 请求
            var xhr = new XMLHttpRequest()
            xhr.open('POST','http://localhost:8888/users/login',true)
            xhr.onload = function(){
                // 因为后端返回的是 json 格式数据
                var res = JSON.parse(xhr.responseText)
                console.log(res)

                // 进行条件判断
                if(res.code === 0){
                    // 登陆失败了
                    errBox.style.display = 'block'
                }else{
                    // 登陆成功了
                    window.location.href = './home.html'
                }
            }

            // 注意：POST 请求携带参数需要提前说明
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
            
            // 因为POST 请求携带参数是在请求体内
            xhr.send('username=' + name + '&password=' + pwd)
            
        }
    </script>
</body>
</html>